<template>
    <div>
        <el-row style="margin-bottom:30px"><div style="font-weight:900">数据概览</div></el-row>
        <el-row>
            <el-col :span="8" style="padding-left:20px">
                <div>
                <el-progress type="circle" color="#79a8ff"  :stroke-width="10" :percentage="25" :width="wid"></el-progress>
                <div class="a">指标AA</div>
                </div>
            </el-col>
            <el-col :span="8" style="padding-left:20px">
                <el-progress type="circle"  color="#ff7859" :stroke-width="10" :percentage="50" :width="wid"></el-progress>
                <div class="a">指标BB</div>
            </el-col>
            <el-col :span="8" style="padding-left:20px">
                <el-progress type="circle"  color="#ffc341" :stroke-width="10" :percentage="70" :width="100"></el-progress>
                <div class="a">指标CC</div>
            </el-col>
        </el-row>
        <el-row>
            <div style="height:30px; margin-top:50px">
                <div class="font">指标A</div>
                <div class="progress" style="width:350px;">
                    <el-progress :percentage="80" :stroke-width="8" :color="customColor" ></el-progress>
                </div>
            </div>
            <div style="height:35px;">
                <div class="font">指标B</div>
                <div class="progress" style="width:350px;">
                    <el-progress :percentage="55" :stroke-width="8" :color="customColor"></el-progress>
                </div>
            </div>
            <div style="height:35px;">
                <div class="font">指标C</div>
                <div class="progress" style="width:350px;">
                    <el-progress :percentage="92" :stroke-width="8" :color="customColor"></el-progress>
                </div>
            </div>
            <div style="height:35px;">
                <div class="font">指标D</div>
                <div class="progress" style="width:350px;">
                    <el-progress :percentage="22" :stroke-width="8" :color="customColor"></el-progress>
                </div>
            </div>
            <div style="height:35px;">
                <div class="font">指标E</div>
                <div class="progress" style="width:350px;">
                    <el-progress :percentage="67" :stroke-width="8" :color="customColor"></el-progress>
                </div>
            </div>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'DataViewThree',
    data() {
        return {
            wid:100,
            customColor: [
                {color: '#f56c6c', percentage: 20},
                {color: '#e6a23c', percentage: 40},
                {color: '#5cb87a', percentage: 60},
                {color: '#1989fa', percentage: 80},
                {color: '#6f7ad3', percentage: 100}
            ]
        }
    }
}
</script>

<style lang="less" scoped>
.a {
    width: 100px;
    text-align: center;
}
.font {
    position: absolute;
    left: 0;
}
.progress {
    position:absolute;
    right: 0;
}
</style>